<template>
  <view>
    <mp-cells extClass="desc">
      <mp-cell>
        <view slot="title" class="cell-title">收货人</view>
        <view>
          <input
            v-model="name"
            class="weui-input"
            placeholder-class="placeholder-clas"
            placeholder="收货人姓名"
            confirm-type="next"
          />
        </view>
      </mp-cell>
      <mp-cell>
        <view slot="title" class="cell-title">手机号码</view>
        <view>
          <input
            v-model="machineNumber"
            type="number"
            class="weui-input"
            placeholder-class="placeholder-clas"
            placeholder="收货人手机号码"
          />
        </view>
      </mp-cell>
      <mp-cell>
        <view slot="title" class="cell-title">所在地区</view>
        <view class="after placeholder-clas">
          <!-- <areaCom ref="childChoseCity" :choseCityPropsInit="address" @getPropsAddress="getPropsAddress"></areaCom> -->
          <addressCom :address="address" @confirm="addConfirm" />
        </view>
      </mp-cell>
      <mp-cell>
        <view slot="title" class="cell-title">详细地址</view>
        <view>
          <textarea
            v-model="street"
            class="weui-input"
            auto-height
            placeholder-class="placeholder-clas"
            placeholder="请输入详细收货地址"
          />
        </view>
      </mp-cell>

      <view class="weui-cell cell-diy">
        <view>设置为默认地址</view>
        <switch
          class="cell-switch"
          color="#000000"
          :checked="state"
          @change="(event) => (state = event.detail.value)"
        />
      </view>
      <view class="tip">设置默认地址后，每次结算会自动使用该地址</view>
    </mp-cells>
    <view class="address-add" style="margin: 56rpx 24rpx" @click="newAddress">保存</view>
  </view>
</template>

<script>
import { createReceiverAddress, editReceiverAddress } from '@/api/service';
import addressCom from '@/components/addressCom';

export default {
  components: { addressCom },
  data() {
    return {
      name: '',
      machineNumber: '',
      street: '',
      state: false,
      pageType: '',
      id: '',
      address: []
    };
  },

  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    if (eventChannel.on) {
      eventChannel.on('pageData', (res) => {
        if (res.type === 'edit') {
          const { data } = res;
          this.name = data.name;
          this.machineNumber = data.machineNumber;
          this.street = data.street;
          this.state = !!data.state;
          this.address = [data.provincesId, data.cityId, data.areaId];
          this.pageType = res.type;
          this.id = data.id;
        } else {
          this.pageType = '';
        }
      });
    }
  },

  onUnload() {
    uni.$off('pageData');
  },

  methods: {
    async newAddress() {
      const id = uni.getStorageSync('insuredPatientId');
      const data = {
        name: this.name,
        machineNumber: this.machineNumber,
        provincesId: this.address[0],
        cityId: this.address[1],
        areaId: this.address[2],
        street: this.street,
        state: this.state ? 1 : 0
      };

      for (const item of Object.keys(data)) {
        if (data[item] === '') {
          uni.showToast({
            title: '请填写收件信息',
            icon: 'none'
          });
          return;
        }
      }

      const telReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (!telReg.test(data.machineNumber)) {
        uni.showToast({
          title: '手机号有误，请重新输入！',
          duration: 2000,
          icon: 'none'
        });
        return;
      }

      if (this.pageType === 'edit') {
        await editReceiverAddress(id, data, this.id);
      } else {
        await createReceiverAddress(id, data);
      }
      uni.$emit('addressChange');
      this.$wxPromise.navigateBack({
        delta: 1
      });
    },

    addConfirm(address) {
      this.address = address;
    }
  }
};
</script>

<style lang="scss">
page {
  background: #ffffff;
}
.placeholder-clas {
  font-size: 32rpx !important;
  color: rgba(0, 0, 0, 0.3);
}
.inputBox {
  .title {
    display: none;
  }
  .uni-input {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.3);
  }
  .rightIcon ._img {
    width: 36rpx !important;
    height: 36rpx !important;
  }
}
.address-com {
  .add_view {
    color: #000000 !important;
  }
}
</style>
<style lang="scss" scoped>
.desc .cell-title {
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.55);
  width: 160rpx;
}

.desc {
  .after {
    font-size: 32rpx;
  }
  .after::after {
    // content: ' ';
    // position: absolute;
    // top: 50rpx;
    // right: 40rpx;
    // width: 0px;
    // height: 0px;
    // border-top: 16rpx solid #999999;
    // border-left: 12rpx solid transparent;
    // border-right: 12rpx solid transparent;
  }
  .weui-input {
    font-size: 32rpx;
    max-width: 480rpx;
  }
}
.cell-diy {
  display: flex;
  justify-content: space-between;
}
.tip {
  position: relative;
  font-size: 28rpx;
  left: 34rpx;
  top: -20rpx;
  color: rgba(0, 0, 0, 0.3);
}
.address-add {
  border: 1px solid rgba(0, 0, 0, 0);
  background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
  opacity: 1;
  border-radius: 44rpx;
  height: 88rpx;
  margin: 0 24rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #ffffff;
}
</style>
